<script setup name="App">
    import { ref,reactive, watch } from 'vue'
    var geyao=ref({
        name:'geyao',
        age:18,
        sex:'男'
    })
    // 可以定义基本数据类型 也可以去定义复杂数据类型 工作中其实常用还是ref
    watch(geyao,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
    },{deep:true,immediate:true})
    // ref改变同一个对象的属性时候 newValue,oldValue是一个值
    // ref修改整个对象的时候 
    </script>
    
    <template>
         <div>{{ geyao.name }}</div>
         <div>{{ geyao.age }}</div>
         <div>{{ geyao.sex }}</div>
         <!-- <button @click="name='geyaosinice'">修改姓名</button>
         <button @click="age=19">修改年龄</button>
         <button @click="sex='女'">修改性别</button> -->
         <button @click="geyao.age++">修改属性</button>
         <button @click="geyao={
             name:'fangfang',
             age:19,
             sex:'女'
         }">修改整个对象</button>
         <!-- <button @click="obj.age=19">修改年龄</button>
         <button @click="obj.sex='女'">修改性别</button> -->
    </template>
    
    <style scoped>
    
    </style>
    
    
    
    
    